<template>
  <div class="app-main">
    <router-view v-slot="{ Component, route }">
      <transition name="fade-transform" mode="out-in">
        <keep-alive>
          <component :is="Component" :key="route.path"></component>
        </keep-alive>
      </transition>
    </router-view>
  </div>
</template>

<script>
import { isTags } from "../../utils/tags";
import { generateTitle, watchSwitchLang } from "../../utils/i18n";
export default {
  data() {
    return {};
  },
  mounted() {
    // console.log(this.getTitle());
  },
  methods: {
    getTitle() {
      let title = "";
      if (!this.$route.meta) {
        const pathArr = this.$route.path.split("/");
        console.log(pathArr);
        title = pathArr[pathArr.length - 1];
      } else {
        title = generateTitle(this.$route.meta.title);
      }
      return title;
    },
  },
  watch: {
    $route: {
      handler: function(newValue, oldValue) {
        // console.log(newValue);
          if(!isTags(newValue.path)) return
          let { fullPath, meta, name, params, path, query } = newValue
          this.$store.commit('app/addTagsViewList', {
              fullPath, 
              meta, 
              name,
              params,
              path, 
              query,
              title: this.getTitle(newValue)
          })
      },
      watchSwitchLang: function(){
        this.$store.getters.tagsViewList.forEach((route, index) => {
          this.$store.commit('app/changeTagsView', {
            index,
            tag: {
              ...route,
              title: getTitle(route)
            }
          })
        })
      },
      immediate: true,
    },
  },
};
</script>

<style scoped lang='scss'>
.app-main {
  min-height: calc(100vh - 50px - 43px);
  width: 100%;
  position: relative;
  overflow: hidden;
  padding: 104px 20px 20px 20px;
  box-sizing: border-box;
}
</style>
